<template>
	<view class="bac-col-fa w-100 bottom-index" :class="messageList.length === 0 ? 'h-100' : ''">
		<!-- 顶部导航 -->
		<custom-navber :title="'活动通知'"></custom-navber>
		<!-- 如果消息列表为空 -->
		<view v-if="messageList.length === 0" class="message-empty-box">
			<image class="message-empty-image"
				src="https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/message-empty.png"
				mode="scaleToFill" />
			<view class="fs-28 fw-600">暂无消息</view>
		</view>
		<!-- 消息列表 -->
		<view v-else class="ping-20 w-100" :style="{marginTop:menuObject.height + menuObject.top +8 + 'px'}">
			<view class="fs-24 col-87">只看他</view>
			<scroll-view scroll-x class="w-100 mt-20">
				<view class="flex-dir-row ali-item-cen w-100">
					<view class="text-ali-c flex-shrink-0" style="width: 23%;" v-for="(item,index) in messageList"
						@click="selectedMessage = index" :key="index">
						<view class="ali-item-cen flex-center h-100-r">
							<!-- 选中和未选择样式 -->
							<view :class="selectedMessage === index ? 'avatar-box-selected' : ''" class="br-200 ping-10"
								style="width: 100rpx;height: 100rpx;">
								<image class="message-uesr-avatar"
									src="https://gd-hbimg.huaban.com/cab77d5cc2560dbff3f37786e016093cbb2f854a30bd7-Ncp3yA_fw1200webp"
									mode="aspectFill" />
							</view>
						</view>
						<view class="fs-24 text-element-1 mt-10"
							:class="selectedMessage === index ? 'fw-600' : 'col-87'">活动助手</view>
					</view>
				</view>
			</scroll-view>
			<!-- 活动消息 -->
			<view class="w-100 mt-30">
				<view class="bac-col-f br-20 mb-30" v-for="index in 10"
					@click="$NavigateTo('/pages/detail/messageDetail')">
					<view class="flex-dir-row ali-item-cen flex-x-bet ping-20">
						<view class="flex-dir-row ali-item-cen">
							<image class="activity-message-avatar"
								src="https://gd-hbimg.huaban.com/cab77d5cc2560dbff3f37786e016093cbb2f854a30bd7-Ncp3yA_fw1200webp"
								mode="aspectFill" />
							<view class="fs-26 col-00ba31 fw-600 ml-10">你的活动助手</view>
						</view>
						<view class="fs-24 col-b1">1分钟前</view>
					</view>
					<view class="pos-rela">
						<image
							src="https://gd-hbimg.huaban.com/d73736ec03127fb92c3eeff907552298596b94d2923cd-jkpFgB_fw1200webp"
							mode="aspectFill" class="activity-message-image" />
						<view class="col-f fw-600 fs-32 pos-abso ping-20 w-100 activity-message-title text-element-1">
							哪吒汽车挑战赛</view>
					</view>
					<view class="fs-28 ping-20 text-element-2">拥抱大自然，体验户外活动的魅力！</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'pageD',
		data() {
			return {
				//顶部导航
				// #ifdef MP-WEIXIN
				menuObject: uni.getMenuButtonBoundingClientRect(),
				// #endif
				// #ifndef MP-WEIXIN
				menuObject: 0,
				// #endif
				//消息列表
				messageList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
				//选中的用户
				selectedMessage: 0,
				// 选中的活动
				selectedActivity: 0,
			}
		},
		methods: {

		}
	}
</script>
<style lang="scss">
	.message-empty-box {
		position: fixed;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
	}

	.centered {
		left: 50%;
		transform: translate(-50%, 0%);
	}

	.message-empty-image {
		width: 200rpx;
		height: 200rpx;
	}

	.message-uesr-avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}

	.activity-message-avatar {
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
	}

	.activity-message-image {
		width: 100%;
		height: 300rpx;
	}

	.activity-message-title {
		bottom: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.3);
	}

	.avatar-box-selected {
		background: #e4e4e4;
		// background动画
		transition: background 0.5s ease-in-out;
	}
</style>